<!-- 联系人新增编辑模态框 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="70%"
    @close="$emit('update:visible', false)"
  >
    <el-form
      :model="form"
      ref="contactsForm"
      :rules="rules"
      label-width="130px"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系人：" prop="contactName">
            <el-input v-model.trim="form.contactName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="contactEmail">
            <el-input v-model.trim="form.contactEmail" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系电话：" prop="contactPhone">
            <el-input v-model.trim="form.contactPhone" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-checkbox
              v-model.trim="form.contactOneBool"
              :disabled="form.contactOneBool && form.contactOne != 0 "
            >默认主要联系人</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="通信地址：" class="posterurl">
        <div class="flex-box">
          <el-form-item prop="contactProvince">
            <el-select v-model.trim="form.contactProvince" @change="loadCity" placeholder="省">
              <el-option
                v-for="item in provinceOptions"
                :key="item.provinceid"
                :label="item.province"
                :value="item.province"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="contactCity">
            <el-select v-model.trim="form.contactCity" @change="loadArea" placeholder="市">
              <el-option
                v-for="item in cityOptions"
                :key="item.cityId"
                :label="item.city"
                :value="item.city"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="contactCounty">
            <el-select v-model.trim="form.contactCounty" placeholder="区/县">
              <el-option
                v-for="item in areaOptions"
                :key="item.areaId"
                :label="item.area"
                :value="item.area"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:100%" prop="contactAddress">
            <el-input v-model.trim="form.contactAddress" autocomplete="off"></el-input>
          </el-form-item>
        </div>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="save('contactsForm')">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script>
import api from "@/api/apiPath";
export default {
  components: {},
  data() {
    return {
      form: {},
      provinceOptions: [], //省份
      cityOptions: [], //城市
      areaOptions: [], //区
      title: "新增联系人",
      show: false,

      rules: {
        contactName: [
          { required: true, message: "请输入联系人名称", trigger: "blur" },
          {
            min: 0,
            max: 20,
            message: "长度不得超过20个字符",
            trigger: ["blur", "change"]
          }
        ],
        contactEmail: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        contactPhone: [
          {
            type: "number",
            required: true,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              const mobileReg = /^1\d{10}$/;
              if (!value) {
                callback(new Error("请输入联系电话"));
              } else if (!mobileReg.test(value)) {
                callback(new Error("请输入正确格式的手机号"));
              } else {
                callback();
              }
            }
          }
        ],

        contactAddress: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: ["blur", "change"]
          },
          {
            min: 0,
            max: 50,
            message: "长度不得超过50个字符",
            trigger: ["blur", "change"]
          }
        ],
        contactProvince: [
          { required: true, message: "请选择省份", trigger: "change" }
        ],
        contactCity: [
          { required: true, message: "请选择城市", trigger: "change" }
        ],
        contactCounty: [
          { required: true, message: "请选择区县", trigger: "change" }
        ]
      }
    };
  },
  props: ["visible", "type", "editform", "hasImport"],
  watch: {
    visible(o, n) {
      if (o) {
        this.show = true;
        this.init();
      } else {
        this.show = false;
      }
    }
  },
  methods: {
    init() {
      if (this.type == "edit") {
        this.title = "编辑联系人";
        this.form = this.editform;
      } else {
        this.title = "新增联系人";
        this.form = {
          contactOneBool: !this.hasImport
        };
        if (this.$refs["contactsForm"]) {
          this.$refs["contactsForm"].resetFields();
        }
      }
    },

    save(formName) {
      let _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          //_this.show = false;
          _this.$emit("onSave", JSON.parse(JSON.stringify(this.form)));
        } else {
          return false;
        }
      });
    },
    //获取省
    loadprovinces() {
      this.axios.get(api.GETPROVINCES).then(res => {
        if (res.data.code == 200) {
          this.provinceOptions = res.data.data;
        }
      });
    },
    //获取市
    loadCity(province) {
      let thisObj = this.provinceOptions.find(item => {
        return province === item.province;
      });
      this.$set(this.form, "contactCity", null);
      this.$set(this.form, "contactCounty", null);
      this.axios.get(`${api.GETCITY}/${thisObj.provinceid}`).then(res => {
        if (res.data.code == 200) {
          this.cityOptions = res.data.data.cityList;
        }
      });
    },
    //获取区
    loadArea(city) {
      let thisObj = this.cityOptions.find(item => {
        return city === item.city;
      });
      this.$set(this.form, "contactCounty", null);
      this.axios.get(`${api.GETAREA}/${thisObj.cityId}`).then(res => {
        if (res.data.code == 200) {
          this.areaOptions = res.data.data.cityArealist;
        }
      });
    }
  },

  created() {
    this.loadprovinces();
  },
  destroyed() {},
  filters: {}
};
</script>
